<template>
  <view class="u-page">
    <template v-if="value6===0">
      <HomeTabbar />
    </template>
    <template v-if="value6===1">
      <HealthRecords />
    </template>
    <template v-if="value6===2">
      <HomeTabbar />
    </template>
    <template v-if="value6===3">
      <My />
    </template>
    <view>
      <u-tabbar :border="false" :value="value6" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
        <u-tabbar-item v-for="(item,index) in tabbarList" :key="index" @click="select_page(index)">
          <view slot="text" class="home_text">
            <view :class="value6 === index ? 'activeColor' : 'inactiveColor'">{{item.title}}</view>
            <view :class="value6 === index ? 'active' : ''"></view>
          </view>
        </u-tabbar-item>
      </u-tabbar>
    </view>
  </view>
</template>

<script>
  import HealthRecords from '../health-records'
  import HomeTabbar from './home-tabbar.vue'
  import My from '../my/my.vue'
	export default {
    components: {
      HealthRecords,
      HomeTabbar,
      My
    },
		data() {
			return { 
        tabbarList: [
          {title: '首页', path: 'HomeTabbar'},
          {title: '健康档案', path: 'HealthRecords'},
          {title: '我的问诊', path: 'HomeTabbar'},
          {title: '个人中心', path: 'My'}
        ],
        value6: 0,
			}
		},
		methods: {
      select_page(index) {
        this.value6 = index
      }
		}
	}
</script>

<style lang="scss" scoped>
.u-page{
  padding-bottom: 160rpx;
}
.home_text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.active{
  width: 40rpx;
  border: 1px solid #41ab85;
}
.activeColor{
  color: #41ab85;
  font-size: 32rpx;
}
.inactiveColor{
  color: #505050;
  font-size: 32rpx;
}
::v-deep .u-tabbar__placeholder{
  display: none !important;
}
</style>
